<!DOCTYPE html>
<html lang="en" style="height:100%">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>动态详情</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css" />
    <link rel="stylesheet" type="text/css" href="../../css/vant.css" />
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        input{

            outline:none;
        }
        .active{
            width: 70%;
            background-color: pink;
        }
        .has_follow{
          color: #999999;
            border: 1px solid #999;
        }
        .huifu{
          margin-left:5px;
          padding:3px 10px;
          background: #f7f4f2;
          border-radius:10px
        }
        .van-field__body{
          border: 1px solid #F5F5F5;
        }

        .van-password-input__security{
          border-top: 1px solid #f7f4f2;
          border-bottom: 1px solid #f7f4f2;
          border-left: 1px solid #f7f4f2;
        }
        .van-password-input__security li{
          border-right: 1px solid #f7f4f2;
        }
    </style>
</head>

<body style="background: #fff;">
<div id="app"  v-cloak style="padding-bottom: 49px;">
    <div class="user-title header-title" style="border-bottom: 1px solid #f7f4f2;height: 70px;">
        <img style="width: 8px;height: 16px;position: absolute;left: 12px;" v-back.tapmode v-src="'../../image/back_heise-1.png'" />
        <img class="details-pro" style="vertical-align: middle" :src="dynamic_info.dynamic_info.member_avatar" v-myclick="[dynamic_info.dynamic_info.member_id,open_tar]">
        <span class="personal-name details-name" style="vertical-align: middle" v-myclick="[dynamic_info.dynamic_info.member_id,open_tar]">{{dynamic_info.dynamic_info.member_nickname}}</span>
        <span class="details-guanzhu" v-show="dynamic_info.dynamic_info.member_id !=getPrefs('member_id')" v-myclick="add_follow" :class="{'has_follow':dynamic_info.dynamic_info.attent_flag==1}">{{dynamic_info.dynamic_info.attent_flag==0?'关注':'已关注'}}</span>
        <img class="details-fenxiang" style="width: 19px;height: 19px;" v-src="'../../image/fenxiang.png'" />
    </div>
    <div class="details-swiper">
        <van-swipe indicator-color="#F95656" >
            <van-swipe-item class="tu" v-for="(item, index) in dynamic_info.dynamic_info.image_info">
                <img style="height: auto;" :src="item"/>
            </van-swipe-item>
        </van-swipe>
    </div>
    <div class="introduce">
        <div style="font-size: 15px;font-weight: bold;margin-bottom: 14px">{{dynamic_info.dynamic_info.title}}</div>
        <span style="font-size: 12px">{{dynamic_info.dynamic_info.content}}</span>
        <div class="introduce-item">
            <span>{{dynamic_info.dynamic_info.create_time| time}}</span>
            <span v-myclick="[dynamic_info.dynamic_info.id,report]">举报</span>
        </div>
    </div>
    <!-- <div class="comment">
        <div  class="comment-title">评论({{dynamic_info.dynamic_info.comment_number}})</div>
        <div class="comment-title-input">
            <img src="../../image/3_bg.png" />
            <input type="text" placeholder="说点什么吧，也许能交到朋友哟">
        </div>
    </div> -->
    <div class="comment-title-people">
        <ul>
            <li class="comment-li" v-for="(item, index) in dynamic_info.comment_info">
                <img class="comment-pro" :src="item.from_avatar" v-myclick="[item.from_id,open_tar]">
                <div class="comment-pro-datas">
                    <span style="font-weight: bold;margin-bottom: 2px;">{{item.from_nickname}}</span>
                    <div style="color: #999;">{{item.create_time|time}}
                      <span v-myclick="[item,report_comment]">举报</span>
                      <span v-myclick="[item,del_comment]" style="margin-left:10px" v-show="item.from_id==getPrefs('member_id')">删除</span>
                    </div>

                    <img class="comment-img" v-myclick="[index,praise_comment]" v-src="'../../image/hongse-xin.png'" v-show="item.praise_flag==1">
                    <img class="comment-img" v-myclick="[index,praise_comment]" v-src="'../../image/huise-xin.png'" v-show="item.praise_flag==0">
                    <span class="love-number">{{item.praise_number}}</span>
                    <span style="margin: 12px 0px;display: inline-block;min-width:50%" @click="to_comment(item.comment_id)">{{item.from_content}}</span>
                    <span class="huifu" v-myclick="[index,show_comment]">{{item.extra.length>0?'收起':item.comment_number+'回复'}}</span>
                    <div class="comment-li-two" v-for="(content, index1) in item.extra">
                        <img class="comment-pro" :src="content.from_avatar">
                        <div class="comment-pro-datas">
                            <span style="font-weight: bold;margin-bottom: 2px;">{{content.from_nickname}}</span>
                            <div style="color: #999;">
                              {{content.create_time|time}}
                              <span v-myclick="[content,report_comment]">举报</span>
                              <span v-myclick="[item,del_comment]" style="margin-left:10px" v-show="content.from_id==getPrefs('member_id')">删除</span>
                            </div>
                            <img class="comment-img" @click="praise_comment1(index,index1)" v-src="'../../image/hongse-xin.png'" v-show="content.praise_flag==1">
                            <img class="comment-img" @click="praise_comment1(index,index1)" v-src="'../../image/huise-xin.png'" v-show="content.praise_flag==0">
                            <span class="love-number">{{content.praise_number}}</span>
                            <span style="margin: 8px 0px;display: inline-block;min-width:50%" @click="to_comment2(index,content.comment_id)">
                              {{content.to_id=='0'?(content.from_status=='1'?content.from_content:'已被屏蔽'):(content.from_status=='1'?content.from_content:'已被屏蔽')+'//@'+content.to_nickname+':'+content.to_content}}
                            </span>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="comment-bottom">
        <input type="text" v-model="mycomment" placeholder="说点什么吧..." :class="{ active:isActive}" v-myclick="changeValue" @keyup.enter="submit">
        <div>
            <img class="comment-bottom-img-one" v-show="dynamic_info.dynamic_info.praise_flag==1" v-myclick="add_attent" v-src="'../../image/hongse-xin.png'">
            <img class="comment-bottom-img-one" v-show="dynamic_info.dynamic_info.praise_flag==0" v-myclick="add_attent" v-src="'../../image/huise-xin.png'">

            <span>{{dynamic_info.dynamic_info.praise_number}}</span>
        </div>
        <div>
            <img class="comment-bottom-img-one" v-show="dynamic_info.dynamic_info.collect_flag==0" v-src="'../../image/collect.png'" v-myclick="collect">
            <img class="comment-bottom-img-one" v-show="dynamic_info.dynamic_info.collect_flag==1" v-src="'../../image/collected.png'" v-myclick="collect">

            <span>{{dynamic_info.dynamic_info.collect_number}}</span>
        </div>
        <div>
            <img class="comment-bottom-img-one" style="width: 16px;height: 15px;" v-src="'../../image/pinglun.png'">
            <span>{{dynamic_info.dynamic_info.comment_number}}</span>
        </div>
        <div style="margin-right: 0px;margin-left: 3%;" v-myclick="show_gift">
            <img class="comment-bottom-img-two" v-src="'../../image/liwu.png'">
        </div>
    </div>

    <van-popup
            v-model="show"
            closeable
            position="bottom"
            :style="{ height: '80%' }">
    <div class="diamond">
        <img class="frame-zuanshi" v-src="'../../image/zuanshi.png'"/>
        <span class="my-zuanshi">我的钻石:{{dynamic_info.dynamic_info.diamond_number}}</span>
    </div>


    <div v-show="gift_title">
      <div class="heart-bg">
          <img src="../../image/big/aixin.png"/>
          <span>爱心</span>
      </div>
      <div class="setpper">
          <div class="setpper-item-top" v-for="(data, index) in list" :class="{active:index == addindex}" v-myclick="[index, setnumber]">{{data}}</div>
          <div class="custom">
              <input class="custom-inp" type="tel" placeholder="自定义" model="gift_count">
          </div>
      </div>
      <div class="diamond-bottom">
          <div class="diamond-bottom-left">
              <span class="songgei">送给</span>
              <img class="diamond-bottom-img" :src="dynamic_info.dynamic_info.member_avatar">
          </div>
          <div class="diamond-bottom-right">
              <span class="xiaohao">消耗钻石{{gift_count}}个</span>
              <span class="give" v-myclick="give_gift">赠送</span>
          </div>
      </div>
    </div>

    <div v-if="show_pawword">
      <div class="keyboard_head">
        <div class="keyboard_head_con">输入支付密码</div>
      </div>
      <div style="margin:20px 0;">
        <div style="text-align:center;font-size:15px;margin-bottom:5px;">支付验证</div>
        <div style="text-align:center;font-size:12px;color:#999;">不扣除任何费用</div>
      </div>
      <van-password-input
        :value="value"
        :focused="showKeyboard"
        @focus="showKeyboard = true"
      ></van-password-input>
      <!-- 数字键盘 -->
      <van-number-keyboard
      :show="showKeyboard"
      extra-key="."
      @blur="show = false"
      @input="onInput"
      @delete="onDelete"
      ></van-number-keyboard>
    </div>


    </van-popup>
    <van-popup
      v-model="show1"
      closeable
      position="bottom"
      :style="{ height: '20%' }"
/>
<div style="margin-top:40px;">
<van-cell-group>
  <van-field
    v-model="mycomment"
    center
    clearable
    placeholder="请输入您想说的话"
  >
    <van-button slot="button" size="small" type="primary" v-myclick="send_comment">发送</van-button>
  </van-field>
</van-cell-group>
</van-popup>

<!-- <input type="tel" id="pwd"> -->
</div>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>
<script type="text/javascript" src="../../script/vant.min.js"></script>

<script>
    var vm,
        wx,
        dynamic_info;
    apiready = function () {
        setBSImg();
        new Vue({
            el: '#blank'
        })
        wx = api.require('wx');
        var data = {
            member_id: getPrefs('member_id'),
            dynamic_id: api.pageParam.id,
        };
        var callback = function (ret) {
          dynamic_info = ret.content;
          console.log(JSON.stringify(dynamic_info))
          initApp();
        };
        pinet.post(APIURL+'/app/dynamic/dynamicDetail', data, callback);
        api.parseTapmode();
        // addListeners();
    };

    function initApp() {
        // var isBigImg = Vue.BSImg == 'big';
        vm = new Vue({
            el: '#app',
            data: {
                member_id:getPrefs('member_id'),
                current: 0,
                show:false,
                show1:false,
                isActive:false,
                list:[1,20,66,99],
                gift_count:1,
                addindex:0,
                dynamic_info:dynamic_info,
                mycomment:'',
                comment_flag:2,
                commenting_index:0,
                extras:[],
                show_pawword:false,
                showKeyboard:true,
                value:'',
                gift_title:true,
            },
            methods: {
                onInput(key) {
                this.value = (this.value + key).slice(0, 6);
                },
                onDelete() {
                  this.value = this.value.slice(0, this.value.length - 1);
                },
                setnumber:function(index){
                    this.addindex = index;
                    this.gift_count = this.list[index]
                },
                send_comment:function(){
                  if(!hasPrefs('token')){
                    api.openWin({
                        name: 'login',
                        url: '../login/login.html',
                    });
                    return;
                  }
                  var data = {
                      flag:this.comment_flag,
                      from_id: getPrefs('member_id'),
                      dynamic_id: api.pageParam.id,
                      comment_id:this.comment_id,
                      from_content:this.mycomment,
                  };
                  var callback = function (ret) {
                    api.toast({
                        msg: '评论成功',
                        duration: 2000,
                        location: 'middle'
                    });
                    if(vm.comment_flag==3){//如果还二级评论刷新改一级评论下的二级评论
                      vm.show_comment(vm.commenting_index);
                      vm.show1 = false;
                    }else{
                      vm.reload_info();
                      vm.show1 = false;
                    }

                  };
                  pinet.post(APIURL+'/app/comment/comment', data, callback);
                },
                changeValue:function(){
                    this.isActive = true;
                },
                show_comment:function(index){
                  if(this.dynamic_info.comment_info[index].extra.length>0){
                    this.dynamic_info.comment_info[index].extra = [];
                  }else{
                    var comment_id = this.dynamic_info.comment_info[index].comment_id;
                    var that = this;
                    var data = {
                        member_id: getPrefs('member_id'),
                        comment_id: comment_id,
                        page_no:1,
                        page_size:30
                    };
                    showProgress();
                    var callback = function (ret) {
                      that.dynamic_info.comment_info[index].extra = ret.content.extra;
                    };
                    pinet.post(APIURL+'/app/comment/commentDetail', data, callback);
                  }

                  // this.show1 = true;
                  // this.comment_id = comment_id;
                },
                to_comment:function(comment_id){
                  this.show1 = true;
                  this.comment_flag = 2;
                  this.comment_id = comment_id;
                },
                to_comment2:function(index,comment_id){
                  this.show1 = true;
                  this.comment_flag = 3;
                  this.commenting_index = index;//记录正在被二级评论的一级评论，评论好只需刷新这条评论下的二级评论
                  this.comment_id = comment_id;
                },
                give_gift:function(){
                  if(!hasPrefs('token')){
                    api.openWin({
                        name: 'login',
                        url: '../login/login.html',
                    });
                    return;
                  }
                  this.gift_title = false;
                  this.show_pawword = true;
                  // var data = {
                  //     send_member_id: getPrefs('member_id'),
                  //     receive_member_id: this.dynamic_info.dynamic_info.member_id,
                  //     dynamic_id:api.pageParam.id,
                  //     gift_number:this.gift_count,
                  //     return_flag:0
                  // };
                  // var callback = function (ret) {
                  //   api.toast({
                  //       msg: ret.message,
                  //       duration: 2000,
                  //       location: 'middle'
                  //   });
                  //   vm.reload_info();
                  //   vm.show = !vm.show;
                  // };
                  // pinet.post(APIURL+'/app/dynamic/sendGift', data, callback);
                },
                show_gift:function (){
                  this.show = true;
                },
                add_follow:function(){
                  if(!hasPrefs('token')){
                    api.openWin({
                        name: 'login',
                        url: '../login/login.html',
                    });
                    return;
                  }
                  var data = {
                      member_id: getPrefs('member_id'),
                      attention_member_id: vm.dynamic_info.dynamic_info.member_id,
                  };
                  var callback = function (ret) {
                    api.toast({
                        msg: ret.message,
                        duration: 2000,
                        location: 'middle'
                    });
                  vm.dynamic_info.dynamic_info.attent_flag = vm.dynamic_info.dynamic_info.attent_flag==1?0:1
                  };
                  pinet.post(APIURL+'/app/dynamic/attention', data, callback);
                },
                add_attent:function(item){
                  if(!hasPrefs('token')){
                    api.openWin({
                        name: 'login',
                        url: '../login/login.html',
                    });
                    return;
                  }
                  var data = {
                      member_id: getPrefs('member_id'),
                      dynamic_id: api.pageParam.id,
                  };
                  var callback = function (ret) {
                    api.toast({
                        msg: ret.message,
                        duration: 2000,
                        location: 'middle'
                    });
                    vm.dynamic_info.dynamic_info.praise_flag = vm.dynamic_info.dynamic_info.praise_flag==1?0:1;
                    var praise_number = vm.dynamic_info.dynamic_info.praise_number;
                    vm.dynamic_info.dynamic_info.praise_number = vm.dynamic_info.dynamic_info.praise_flag==1?parseInt(praise_number)+1:parseInt(praise_number)-1;
                  };
                  pinet.post(APIURL+'/app/dynamic/dynamicPraiseSet', data, callback);
                },
                collect:function(){
                  if(!hasPrefs('token')){
                    api.openWin({
                        name: 'login',
                        url: '../login/login.html',
                    });
                    return;
                  }
                  var data = {
                      member_id: getPrefs('member_id'),
                      dynamic_id: api.pageParam.id,
                  };
                  var callback = function (ret) {
                    api.toast({
                        msg: ret.message,
                        duration: 2000,
                        location: 'middle'
                    });
                    vm.dynamic_info.dynamic_info.collect_flag = vm.dynamic_info.dynamic_info.collect_flag==1?0:1;
                    var collect_number = vm.dynamic_info.dynamic_info.collect_number;
                    vm.dynamic_info.dynamic_info.collect_number = vm.dynamic_info.dynamic_info.collect_flag==1?parseInt(collect_number)+1:parseInt(collect_number)-1;
                  };
                  pinet.post(APIURL+'/app/dynamic/dynamicCollect', data, callback);
                },
                open_tar:function(target_id){
                  api.openWin({
                      name: 'othershomepage',
                      url: './othershomepage.html',
                      pageParam: {
                          target_id: target_id
                      }
                  });

                },
                onChange:function(index) {
                    this.current = index;
                },
                reload_info:function(){
                  var data = {
                      member_id: getPrefs('member_id'),
                      dynamic_id: api.pageParam.id,
                  };
                  var callback = function (ret) {
                    vm.dynamic_info = ret.content;
                  };
                  pinet.post(APIURL+'/app/dynamic/dynamicDetail', data, callback);
                },
                report:function(id){
                  if(!hasPrefs('token')){
                    api.openWin({
                        name: 'login',
                        url: '../login/login.html',
                    });
                    return;
                  }
                  api.openWin({
                      name: 'report',
                      url: './report.html',
                      pageParam: {
                          type:1,
                          id: id,
                          nickname:this.dynamic_info.dynamic_info.member_nickname,
                          avatar:this.dynamic_info.dynamic_info.member_avatar
                      }
                  });
                },
                report_comment:function(item){
                  if(!hasPrefs('token')){
                    api.openWin({
                        name: 'login',
                        url: '../login/login.html',
                    });
                    return;
                  }
                  api.openWin({
                      name: 'comment_report',
                      url: './comment_report.html',
                      pageParam: {
                          type:2,
                          id: item.dynamic_id,
                          nickname:item.from_nickname,
                          avatar:item.from_avatar
                      }
                  });
                },
                del_comment:function(item){
                  if(!hasPrefs('token')){
                    api.openWin({
                        name: 'login',
                        url: '../login/login.html',
                    });
                    return;
                  }
                  api.confirm({
                      title: '提示',
                      msg: '确认删除该评论？',
                      buttons: ['确定', '取消']
                  }, function(ret, err){
                      if( ret.buttonIndex==1 ){
                        var data = {
                            member_id:getPrefs('member_id'),
                            comment_id: item.dynamic_id,
                        };
                        var callback = function (ret) {
                          api.toast({
                              msg: '删除成功',
                              duration: 2000,
                              location: 'middle'
                          });

                          vm.reload_info();
                        };
                        pinet.post(APIURL+'/app/comment/commentDelete', data, callback);
                      }else{

                      }
                  });


                },
                praise_comment:function(index){
                  if(!hasPrefs('token')){
                    api.openWin({
                        name: 'login',
                        url: '../login/login.html',
                    });
                    return;
                  }
                  var comment_id = this.dynamic_info.comment_info[index].comment_id;
                  var data = {
                      member_id: getPrefs('member_id'),
                      comment_id: comment_id,
                  };
                  var callback = function (ret) {
                    api.toast({
                        msg: ret.message,
                        duration: 2000,
                        location: 'middle'
                    });
                    vm.dynamic_info.comment_info[index].praise_flag=vm.dynamic_info.comment_info[index].praise_flag==1?0:1;
                    var praise_number = vm.dynamic_info.comment_info[index].praise_number;
                    vm.dynamic_info.comment_info[index].praise_number =vm.dynamic_info.comment_info[index].praise_flag == 0?parseInt(praise_number)-1:parseInt(praise_number)+1;
                  };
                  pinet.post(APIURL+'/app/comment/commentPraiseSet', data, callback);
                },
                praise_comment1:function(index,index1){
                  var comment_id = this.dynamic_info.comment_info[index].extra[index1].comment_id;
                  var data = {
                      member_id: getPrefs('member_id'),
                      comment_id: comment_id,
                  };
                  var callback = function (ret) {
                    api.toast({
                        msg: ret.message,
                        duration: 2000,
                        location: 'middle'
                    });
                    vm.dynamic_info.comment_info[index].extra[index1].praise_flag=vm.dynamic_info.comment_info[index].extra[index1].praise_flag==1?0:1;
                    var praise_number = vm.dynamic_info.comment_info[index].extra[index1].praise_number;
                    vm.dynamic_info.comment_info[index].extra[index1].praise_number =vm.dynamic_info.comment_info[index].extra[index1].praise_flag == 0?parseInt(praise_number)-1:parseInt(praise_number)+1;
                  };
                  pinet.post(APIURL+'/app/comment/commentPraiseSet', data, callback);
                },
                submit:function(){
                  var data = {
                      flag:1,
                      from_id: getPrefs('member_id'),
                      dynamic_id: api.pageParam.id,
                      from_content:this.mycomment,
                      to_id:this.dynamic_info.dynamic_info.member_id
                  };
                  var callback = function (ret) {
                    api.toast({
                        msg: '评论成功',
                        duration: 2000,
                        location: 'middle'
                    });

                    vm.reload_info();
                  };
                  pinet.post(APIURL+'/app/comment/comment', data, callback);
                },
                reload_info:function(){
                  var data = {
                      member_id: getPrefs('member_id'),
                      dynamic_id: api.pageParam.id,
                  };
                  var callback = function (ret) {
                    vm.dynamic_info = ret.content;
                  };
                  pinet.post(APIURL+'/app/dynamic/dynamicDetail', data, callback);
                }

            },
            watch: {
              value:function (value) {
                if(value.length>=6){

        					var data = {
                    send_member_id: getPrefs('member_id'),
                    receive_member_id: this.dynamic_info.dynamic_info.member_id,
                    dynamic_id:api.pageParam.id,
                    gift_number:this.gift_count,
                    return_flag:0,
      			        password:this.value,
        			    };
        			    var callback=function(ret){
        							// console.log(JSON.stringify(vm.order_list.oList));
                      api.toast({
                          msg: '送礼成功',
                          duration: 2000,
                          location: 'middle'
                      });
                      vm.show=false;
                      vm.value='';
                      vm.gift_title = true;
                      vm.show_pawword = false;
                      vm.reload_info();

        			    }
        			    pinet.post(APIURL+'/app/dynamic/sendGift',data, callback);
                }
              }
            },
        })
    }


</script>

</html>
